<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品展示</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="ID" width="100"></el-table-column>
            <el-table-column prop="name" label="名称" width="100"></el-table-column>
            <el-table-column label="图片" width="100">
                <template slot-scope="scope">
                    <img src="../../images/product_normal.png" style="width: 100px; height: 100px;">
                </template>
            </el-table-column>
            <el-table-column prop="description" label="描述" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="price" label="价格" width="100"></el-table-column>
            <el-table-column prop="stock" label="库存" width="100"></el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleBuy(scope.row)">购买</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            :page-size="pageSize"
            :current-page="currentPage"
            layout="total, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    tableData: [],
                    total: 0,
                    currentPage: 1,
                    pageSize: 10,
                    form: {
                        id: '',
                        name: '',
                        description: '',
                        price: '',
                        stock: ''
                    }
                }
            },
            created() {
                this.fetchData();
            },
            methods: {
                //购买按钮点击事件
                handleBuy(row) {
                    //点击按钮，弹出模态框，显示商品详情
                    this.$confirm('你想购买该商品吗？').then(() => {
                        //购买数量
                        let num = prompt('请输入购买数量：');
                        if (num == null || num === '' || row.stock < num) {
                            this.$message.error('购买数量不能为空或超过库存');
                        }else {
                            window.location.href = 'buy.html?id=' + row.id +'&num='+num +'&stock='+row.stock ;
                        }
                    }).catch(() => {
                        this.$message.info('已取消');
                    });
                },
                //得到分页查询的数据
                fetchData(pageNum = 1, pageSize) {
                    axios.get('/product/pro_list', {
                        params: {
                            pageNum: pageNum,
                            pageSize: this.pageSize
                        }
                    }).then(res => {
                        this.tableData = res.data.records;
                        this.total = res.data.total;
                    })
                },
                //分页查询
                handleCurrentChange(pageNum) {
                    this.currentPage = pageNum;
                    this.fetchData(pageNum, this.pageSize);
                },
            }
        })
    </script>
</body>
</html>